<template>
    <div
      class="commentmanage-container"
      id="commentmanage-container"
      :class="scroll.isFixed ? 'maxHeight' : ''"
    >
    <div class="searchContent">
      <a-input
        v-model:value="searchValue"
        placeholder="请输入标题/作者名称"
        style="width: 192px"
        allow-clear
        @pressEnter="fetchCommentPage"
        @blur="fetchCommentPage"
      >
        <template #suffix>
          <i class="iconfont icon-search" @click="fetchCommentPage"></i>
        </template>
      </a-input>
      <!-- 创建时间 -->
      <span class="selectLable">投稿时间：</span>
      <date-range-picker
        style="width: 350px"
        v-model:value="timeValue"
        :disabledInfo="disabledInfo"
        @change="changeTime"
        :showTime="{
          hideDisabledOptions: true,
          defaultValue: [dayjs('00:00:00', 'HH:mm:ss')],
        }"
      ></date-range-picker>
      <!-- 状态 -->
      <span class="selectLable">状态：</span>
      <a-select style="width: 192px" v-model:value="auditStatus" :options="statusOptions"
            @change="fetchCommentPage"></a-select>
    </div>
      <div class="ant-spin-container">
        <a-empty style="margin-top: 200px" v-if="isEmpty">
          <p style="color: #b6b6b6">暂无数据</p>
        </a-empty>
        <commentList :configData="configData" :showStatus="true"> </commentList>
        <pagination
          :pageSize="pageSize"
          :dataSource="configData.records"
          @changePage="changePage"
          :isSelect="true"
          :selfChecked="isSelectAll"
          :total="configData.total"
          :isShowPagination="isShowPagination"
          :simple="scroll.isFixed"
          :height="0"
          :showCheckDelete="showCheckDelete"
          :scroll="scroll"
          class="paginations"
          ref="tagBaseTables"
          v-if="configData.total > 0"
        >
        </pagination>
      </div>
    </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  reactive,
  createVNode,
  ref,
  watch,
} from "vue";
import commentList from "./commentList.vue";
import dayjs, { Dayjs } from 'dayjs';
import { dataSourceType, scrollType, configDataType } from "@/type";
import request from "@/api/index";
import { Modal, message, TreeSelectProps } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import pagination from "@/components/pagination/index.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { routerPerm } from "@/utils/common";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";

//data
const btnPerm = ref<any[]>([]);
const route = useRoute();
const isEmpty = ref<boolean>(false);
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = false; // 是否需要分页器中的自定义
const isSelectAll = ref<boolean>(false);
const searchValue = ref<any>(null);
const auditStatus = ref<any>(null);
const statusOptions = [
  { label: "全部", value: null },
  { label: "审核通过", value: 3 },
  { label: "审核不通过", value: 2 }
];
const params = ref<dataSourceType>({
  createTimeStart: null,
  createTimeEnd: null,
});
const disabledInfo = ref({
  // 禁止选择
  type: 2,
  startDays: 0,
});

let configData = reactive<configDataType>({ total: 0, size: 20, records: [] });
let scroll: scrollType = reactive({ y: "", isFixed: false });
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(20);
let rowSelection = ref<(string | number)[]>([]);
const selectList = ref<any[]>([]);
const timeValue = ref<(string | number)[]>([]); // 创建时间

//method
// 内容列表分页-已引用
const fetchCommentPage = async () => {
  let param = {
    status: auditStatus.value,
    titleOrName: searchValue.value,
    startSubmitTime: params.value.createTimeStart,
    endSubmitTime: params.value.createTimeEnd,
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value,
  };
  const data = await request.getReviewedPage(param);
  configData.total = data.total;
  configData.records = data.records;
  isEmpty.value = configData.total === 0 ? true : false;
  nextTick(() => {
    let obj = getTableScroll(117, "commentmanage-container", 40);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
// computed
rowSelection = computed(() => {
  return selectList.value;
});

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  fetchCommentPage();
};
// 切换时间
const changeTime = (data: any) => {
  if (data) {
    params.value.createTimeStart = data[0];
    params.value.createTimeEnd = data[1];
  } else {
    params.value.createTimeStart = undefined;
    params.value.createTimeEnd = undefined;
  }
  fetchCommentPage();
};
//onMounted
onMounted(() => {
  btnPerm.value = routerPerm();
  fetchCommentPage();
});
</script>

<style lang="less" scoped>
.maxHeight {
  max-height: calc(100% - 120px) !important;
}

.commentmanage-container {
  height: calc(100% - 72px);
  background-color: #fff;
  border-radius: 2px;
  padding: 16px;

  .header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    ::v-deep(.ant-tabs-tab) {
      padding: 8px 0;
    }

    ::v-deep(
        .ant-tabs-top > .ant-tabs-nav::before,
        .ant-tabs-bottom > .ant-tabs-nav::before,
        .ant-tabs-top > div > .ant-tabs-nav::before,
        .ant-tabs-bottom > div > .ant-tabs-nav::before
      ) {
      border: none;
    }

    .header-right {
      display: flex;
      flex-direction: row;

      .header-select-area {
        width: 104px;
        height: 32px;
      }

      .search-input {
        width: 192px;
        margin-left: 12px;
        border-radius: 2px;
        height: 32px;

        .icon-search {
          font-size: 20px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.45);
        }
      }

      .hight-select {
        margin-left: 8px;
      }
    }
  }

  .single-header {
    justify-content: end;
    border: none;
    background: #fff;
  }

  .content-header {
    border: none;
    background: #fff;
  }
}

.select-content {
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  margin-top: 16px;
  padding: 16px;
  flex-wrap: wrap;

  .select-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;

    .title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      width: 70px;
    }

    .ant-select {
      flex: 1;
    }

    .ant-picker-range {
      flex: 1;
    }

    .titleSelect {
      width: 100px;
      margin-right: 12px;
    }
  }

  .option-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    margin-top: 16px;

    .reset-btn {
      height: 32px;
    }

    .openorclose {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 16px;
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;

      .iconfont {
        margin-left: 4px;
      }
    }
  }
}
.searchContent {
      margin-right: 0px;
      ::v-deep(.anticon.ant-input-clear-icon-has-suffix) {
    margin-right: 22px;
  }
      .icon-search {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 10px;
        top: 0px;
      }
    }
.selectLable {
  font-size: 14px;
  margin-left: 12px;
}
</style>
<style>
@media screen and (max-width: 1600px) and (min-width: 1280px) {
  .select-content .select-item {
    width: calc(50% - 8px);
  }

  .select-content .select-item:nth-of-type(2n-1) {
    margin-right: 16px;
  }
}

@media screen and (max-width: 1920px) and (min-width: 1601px) {
  .select-content .select-item {
    width: calc(32.99% - 8px);
  }

  .select-content .select-item:nth-of-type(1) {
    margin-right: 16px;
  }

  .select-content .select-item:nth-of-type(2) {
    margin-right: 16px;
  }
}

@media screen and (max-width: 2560px) and (min-width: 1921px) {
  .select-content .select-item {
    width: calc(25% - 8px);
  }

  .select-content .select-item {
    margin-right: 16px;
  }

  .select-content .select-item:nth-of-type(4) {
    margin-right: 0px;
  }
}
</style>
